<template>
  <div>
    <echarts-bar
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="barData"
      :settings="{
        theme: 'dark',
        legendName: {
          water: '水',
          gas: '气',
          wind: '风',
          fire: '火',
        },
        myAxis: {
          axisSite: { right: ['fire'] },
          axisType: ['normal', '%'],
          axisName: ['值', '比率'],
        },
        stack: { 总和: ['water', 'gas'] },
        label: {
          show: true,
          position: 'top',
        },
        switchAxis: {
          axis: 'xAxis',
        },
      }"
    ></echarts-bar>
    <echarts-line
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="barData"
      :extend="{
        yAxis: [
          {
            name: '值',
          },
          {
            name: '比率',
          },
        ],
      }"
      :settings="{
        theme: 'dark',
        legendName: {
          water: '水',
          gas: '气',
          wind: '风',
          fire: '火',
        },
        myAxis: {
          axisSite: { right: ['fire'] },
          axisType: ['normal', '%'],
          axisName: ['值', '比率'],
        },
        label: {
          show: true,
          position: 'top',
        },
        smooth: true,
        stack: { yy: ['water', 'gas', 'wind', 'fire'] },
        area: true,
      }"
    ></echarts-line>
    <echarts-pie
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="pieData"
      :settings="{
        selected: 'single',
        center: ['50%', '60%'],
        radius: ['40%', '50%'],
        roseType: 'radius',
        name: '1',
      }"
    ></echarts-pie>
    <echarts-scatter
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="scatterData"
      :settings="{
        legendName: {
          water: '水',
          gas: '气',
          fire: '火',
        },
        xAxisType: 'category',
        xAxisName: '日期',
        yAxisName: '值',
        tooltipTrigger: 'axis',
        axisVisible: false,
        symbol: 'arrow',
        symbolSize: 40,
      }"
    ></echarts-scatter>
    <echarts-radar
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="radarData"
      :settings="{
        label: {
          show: true,
          position: 'top',
        },
        updateLabel: {
          water: '水',
          gas: '气',
          fire: '火',
        },
      }"
    ></echarts-radar>
    <echarts-waterfall
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="waterfallData"
      :settings="{
        totalName: '12313',
        labelMap: {
          water: '水',
        },
        sumLocation: 'left',
      }"
    ></echarts-waterfall>
    <echarts-gauge
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="gaugeData"
      :settings="{
        gaugeAngle: [180, 0],
        valueRange: [50, 100],
        gaugeTitle: {},
        gaugeDetail: {},
      }"
    ></echarts-gauge>
    <echarts-heatmap
      :chartWidth="'100%'"
      :chartHeight="'600px'"
      :chartData="heatmapData"
      :settings="{}"
    >
    </echarts-heatmap>
  </div>
</template>

<script>
import EchartsBar from '@/components/echarts-demo/echarts-vue/EchartsBar'
import EchartsLine from '@/components/echarts-demo/echarts-vue/EchartsLine'
import EchartsPie from '@/components/echarts-demo/echarts-vue/EchartsPie'
import EchartsScatter from '@/components/echarts-demo/echarts-vue/EchartsScatter'
import EchartsRadar from '@/components/echarts-demo/echarts-vue/EchartsRadar'
import EchartsWaterfall from '@/components/echarts-demo/echarts-vue/EchartsWaterfall'
import EchartsGauge from '@/components/echarts-demo/echarts-vue/EchartsGauge'
import EchartsHeatmap from '@/components/echarts-demo/echarts-vue/EchartsHeatmap'
import axios from 'axios'
export default {
  components: {
    EchartsBar,
    EchartsLine,
    EchartsPie,
    EchartsScatter,
    EchartsRadar,
    EchartsWaterfall,
    EchartsGauge,
    EchartsHeatmap
  },
  data() {
    return {
      mydata: [],
      barData: {
        columns: ['time', 'water', 'gas', 'wind', 'fire'],
        rows: [{
          time: '1-1',
          water: 100,
          gas: 200,
          wind: 300,
          fire: 0.2
        },
        {
          time: '1-2',
          water: 120,
          gas: 230,
          wind: 280,
          fire: 0.2
        },
        {
          time: '1-3',
          water: 140,
          gas: 220,
          wind: 320,
          fire: 0.2
        },
        {
          time: '1-4',
          water: 100,
          gas: 250,
          wind: 350,
          fire: 0.2
        },
        {
          time: '1-5',
          water: 120,
          gas: 220,
          wind: 310,
          fire: 0.2
        },
        {
          time: '1-6',
          water: 130,
          gas: 230,
          wind: 300,
          fire: 0.2
        },
        {
          time: '1-7',
          water: 100,
          gas: 200,
          wind: 250,
          fire: 0.2
        },
        {
          time: '1-8',
          water: 140,
          gas: 240,
          wind: 280,
          fire: 0.2
        }
        ]
      },
      pieData: {
        columns: ['time', 'water'],
        rows: [{
          time: '1-1',
          water: 220
        },
        {
          time: '1-2',
          water: 200
        },
        {
          time: '1-3',
          water: 210
        },
        {
          time: '1-4',
          water: 220
        },
        {
          time: '1-5',
          water: 210
        },
        {
          time: '1-6',
          water: 220
        },
        {
          time: '1-7',
          water: 200
        },
        {
          time: '1-8',
          water: 210
        }
        ]
      },
      scatterData: {
        columns: ['time', 'water', 'fire', 'gas'],
        rows: [{
          time: '1-1',
          water: 220,
          fire: 111,
          gas: 333
        },
        {
          time: '1-2',
          water: 200,
          fire: 111,
          gas: 333
        },
        {
          time: '1-3',
          water: 210,
          fire: 111,
          gas: 333
        },
        {
          time: '1-4',
          water: 220,
          fire: 111,
          gas: 333
        },
        {
          time: '1-5',
          water: 210,
          fire: 111,
          gas: 333
        },
        {
          time: '1-6',
          water: 220,
          fire: 111,
          gas: 333
        },
        {
          time: '1-7',
          water: 200,
          fire: 111,
          gas: 333
        },
        {
          time: '1-8',
          water: 210,
          fire: 111,
          gas: 333
        }
        ]
      },
      radarData: {
        columns: ['time', 'water', 'fire', 'gas'],
        rows: [{
          time: '1-1',
          water: 1,
          fire: 2,
          gas: 3
        }, {
          time: '1-2',
          water: 11,
          fire: 22,
          gas: 33
        },
        {
          time: '1-3',
          water: 111,
          fire: 222,
          gas: 333
        }
        ]
      },
      waterfallData: {
        columns: ['time', 'water'],
        rows: [{
          time: '1-1',
          water: '200',

        },
        {
          time: '1-2',
          water: '300',

        },
        {
          time: '1-3',
          water: '100',

        },
        {
          time: '1-4',
          water: '200',

        },
        {
          time: '1-5',
          water: '300',

        },
        {
          time: '1-6',
          water: '600',

        },
        {
          time: '1-7',
          water: '100',

        }
        ]
      },
      gaugeData: {
        columns: ['name', 'type', 'value'],
        rows: [{
          name: '业务指标',
          type: '我的速度',
          value: '50'
        }]
      },
      heatmapData: {
        columns: ['time', 'city', 'value'],
        rows: [
          { time: '1-1', city: '北京', value: 100 },
          { time: '1-2', city: '上海', value: 200 },
          { time: '1-3', city: '长沙', value: 120 },
          { time: '1-4', city: '武汉', value: 160 },
          { time: '1-5', city: '深圳', value: 150 },
          { time: '1-1', city: '天津', value: 140 },
          { time: '1-2', city: '长沙', value: 190 },
          { time: '1-3', city: '深圳', value: 180 },
          { time: '1-4', city: '上海', value: 130 },
          { time: '1-5', city: '北京', value: 200 }
        ]
      }
    }
  },
  created() {
    // axios.get("http://127.0.0.1:2000/api/demo").then(({ data }) => {
    //   this.mydata.push(data.data)
    // })
  }
}
</script>

<style>
</style>
